<html>
  <head>
    <title>ChuggiWatch!</title>
    <script src="closure/closure/goog/base.js"></script>
    <script src="ui.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(friendlyhal.setupChartRefresh);
    </script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>

  <body>
    <h1>ChuggiWatch!</h1>

    <div id="panel1" class="panel">
      <div class="paneltitle">Video</div>
      <img class="videofeed" src="/videofeed/?action=stream" />
      <div class="buttonpanel">
	<!--Panel only for buttons.-->
	<img class="button" onclick="friendlyhal.pan(friendlyhal.PAN_UP)"
	     src="up.png"/>
	<img class="button" onclick="friendlyhal.pan(friendlyhal.PAN_DOWN)"
	     src="down.png"/>
      </div>
    </div>

    <div id="movementarea" class="chart" style="float:left;">
      Loading Chart, please wait...
    </div>
    <div id="temperaturearea" class="chart" style="float:left;">
      Loading Chart, please wait...
    </div>
    <div id="humidityarea" class="chart" style="float: left;">
      Loading Chart, please wait...
    </div>
    
  </body>
  <script>
    friendlyhal.start();
  </script>
</html>
